<template>
  <div class="container">
    <el-dialog title="设置角色" :visible.sync="dialogVisible" @close='closeDialog' :close-on-click-modal='false'>
      <el-form :model="dataForm" ref="dataForm" label-width="120px" class="common-dialog-height" v-loading="formLoading">
        <el-form-item label="角色列表：" prop="rolesId">
          <el-checkbox-group v-model="dataForm.rolesId">
            <el-checkbox v-for="item in roleData" :label="item.id" name="role" :title="item.desc" :key="item.id">{{item.alias}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="formDataSubmit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import difference from 'lodash/difference'
  export default {
    data () {
      return {
        userId: '',
        dialogVisible: false,
        formLoading: false,
        roleData: [],
        dataForm: {
          rolesId: []
        },
        cacheData: []
      }
    },
    methods: {
      init(id) {
        this.userId = id
        this.dialogVisible = true
        this.formLoading = true
        const data = {
          page: 1,
          limit: 100,
          name: ''
        }
        this.$http({
          url: this.$http.adornUrl('/sys/role/list'),
          method: 'get',
          params: this.$http.adornParams(data)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            const list = result.data.dataList
            let roles = list.map(item => {
              return {
                id: item.roleId,
                alias: item.roleName,
                desc: item.roleDesc
              }
            })
            this.roleData = roles
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
        }).then(() => {
          this.$http.get(this.$http.adornUrl(`/sys/user/relRole/${this.userId}`)).then((response) => {
            const result = response.data
            if (result && result.code === 200) {
              this.cacheData = result.data
              this.dataForm.rolesId = result.data
            } else {
              this.$message({message: result.msg, type: 'error'})
            }
          })
        }).then(() => {
          this.formLoading = false
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
        })
      },
      formDataSubmit() {
        const removeList = difference(this.cacheData, this.dataForm.rolesId)
        const addList = difference(this.dataForm.rolesId, this.cacheData)
        const data = {
          add: addList,
          remove: removeList
        }
        if (removeList.length === this.cacheData.length && this.cacheData.length !== 1) {
          this.$message({message: '用户必须存在至少一个角色!', type: 'warning'})
          return
        }
        this.$http({
          url: this.$http.adornUrl(`/sys/user/auth/${this.userId}`),
          method: 'put',
          data: this.$http.adornData(data)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            this.$message({message: result.msg, type: 'success'})
            this.dialogVisible = false
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
          this.dialogVisible = false
        })
      },
      closeDialog() {
        this.cacheData = []
        this.dataForm.rolesId = []
      }
    }
  }
</script>
<style>
</style>
